<template lang="pug">
view.signature-box.flex.center.rel.radius(:style="`--canvas-width: ${canvasWidth}rpx; --canvas-height: ${canvasHeight}px; --canvas-bgcolor: ${bgcolor}`")
  view.abs.large.bold.txt.light 签名区
  canvas.signature-canvas.rel(@touchstart="methods._start" @touchmove="methods._move" @touchend="methods._end" type="2d")
</template>
<script setup>
import {reactive, onMounted, getCurrentInstance} from 'vue'
import {__postImage} from '/common/script/req.promise'

const props = defineProps({
  lineWidth: {type: [Number, String], default: 2}, // 笔触粗细
  canvasWidth: {type: [Number, String], default: 750}, // 单位rpx
  canvasHeight: {type: [Number, String], default: 400}, // 单位px
  bgcolor: {type: String, default: '#eee'}, // 画板的背景色，非保存图片的背景色
})

const data = reactive({

})

const pureData = {
  points: [],
  ctx: null,
  canvas: null,
}

const methods = {
  _start(e){
    const [{x: X, y: Y}] = e.changedTouches
    pureData.points.push({X, Y})
    pureData.ctx.beginPath()
  },
  _move(e){
    const [{x: X, y: Y}] = e.changedTouches
    pureData.points.push({X, Y})
    let len = pureData.points.length
    if(len>=2){
      methods.draw()
    }
  },
  _end(){
    pureData.points=[]
  },
  draw(){
    const [{X, Y}, {X: x, Y: y}] = pureData.points
    pureData.points.shift()
    pureData.ctx.moveTo(X, Y)
    pureData.ctx.lineTo(x, y)
    pureData.ctx.stroke()
    // #ifdef APP-PLUSH
    // pureData.ctx.draw(true)
    // #endif
  },
  _clear(){
    const {width, height} = pureData.ctx.canvas
    pureData.ctx.clearRect(0, 0, width, height)
  },
  _save(){
    return new Promise((resolve, reject)=>{
      const {canvas} = pureData.ctx
      uni.canvasToTempFilePath({canvas: pureData.canvas}).then(res=>{
        // uni.saveImageToPhotosAlbum({
        //   filePath: res.tempFilePath,
        // })
        __postImage(res.tempFilePath).then(res=>{
          resolve(res)
        }).catch(reject)
      }).catch(reject)
    })
  }
}

onMounted(()=>{
  const { ctx } = getCurrentInstance() // 这就是this
  const query = uni.createSelectorQuery().in(ctx)
  query.select('.signature-canvas').fields({ node: true, size: true }).exec((res) => {
    const [{node: canvas, width: w, height: h}] = res
    const ctx = canvas.getContext('2d')
    ctx.lineWidth = props.lineWidth;
    ctx.lineCap = "round"
    ctx.lineJoin = "round"

    const dpr = uni.getSystemInfoSync().pixelRatio
    canvas.width = w * dpr
    canvas.height = h * dpr
    ctx.scale(dpr, dpr)

    pureData.ctx = ctx
    pureData.canvas = canvas
  })
  // #ifdef APP-PLUSH
  // APP的canvas不同于微信|H5
  // PUG: canvas.signature-canvas(canvas-id="signature" @touchstart="methods._start" @touchmove="methods._move" @touchend="methods._end" )
  // const ctx = uni.createCanvasContext("signature")
  // ctx.lineWidth = props.lineWidth;
  // ctx.lineCap = "round"
  // ctx.lineJoin = "round"
  // pureData.ctx = ctx
  // #endif
})

defineExpose({
  clear: methods._clear,
  save: methods._save
})
</script>
<style lang="scss" scoped>
.signature-box{
  width: var(--canvas-width);
  height: var(--canvas-height);
  background-color: var(--canvas-bgcolor);
  .signature-canvas{
    width: var(--canvas-width);
    height: var(--canvas-height);
    z-index: 2;
  }
}
</style>